import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import { View, Text, Image } from '@tarojs/components';
import { AtSearchBar, AtTabBar, AtIcon, AtButton } from 'taro-ui';
import './new.scss';
export default class New extends Taro.Component {
  constructor() {
    super(...arguments);

    this.state = {
      searchText: '',
      tabIndex: 0
    };
  }
  onSearchTextChange(value) {
    this.setState({
      searchText: value
    });
  }
  tabClick(value) {
    this.setState({
      tabIndex: value
    });
  }
  getUnAcceptedList() {
    const list = [...Array(3).keys()].map(number => {
      return <View className="document_card">
        
        <View className="at-row" style="height:30px;">
          <View className="at-col at-col-1 at-col--auto">
            <AtIcon value="star-2" size="20" color="gold"></AtIcon>
          </View>
          <View className="at-col at-col-1 at-col--auto">
            <Text style="font-size:12px;">显示器出现蓝屏现象</Text>
          </View>
          <View className="at-col at-col-1 at-col--auto">
            <AtIcon value="chevron-right" size="16" color="blue"></AtIcon>
          </View>
          <View className="at-col" style="text-align:right;">
            <Text style="font-size:10px;color:green">处理中</Text>
          </View>
        </View>
        
        <View className="at-row ">
          <View className="at-col at-col-4" style="text-align:center;">
            <Image style="width: 90px;height: 90px;background: #fff;border-radius:3px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587665805772&di=481a99b3b52b504d92a4baa7f2b4247c&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F1e30e924b899a9011623d18919950a7b0208f57f.jpg" />
          </View>
          <View className="at-col at-col-8" style="padding:10px;v-align:top;">
            <Text className="content" style="font-size:10px;">
              开机后正常进入，但是打开浏览器运{'\n'}
            行word文件预览时蓝屏，不知道和{'\n'}插件有没有关系。
          </Text>
          </View>
        </View>
        
        <View className="at-row">
          <View className="at-col" style="text-align:right;">
            <Text className="content" style="font-size:10px;">
              服务申请时间：2020-03-06, 申请人：某某某
          </Text>
          </View>
        </View>
        
        <View className="at-row" style="margin-top:10px;">
          <View className="at-col at-col-3"></View>
          <View className="at-col at-col-3" style="padding:3px;">
            <AtButton type="secondary" size="small" circle>退回</AtButton>
          </View>
          <View className="at-col at-col-3" style="padding:3px;">
            <AtButton type="secondary" size="small" circle>流程查看</AtButton>
          </View>
          <View className="at-col at-col-3" style="padding:3px;">
            <AtButton type="primary" size="small" circle>完成确认</AtButton>
          </View>
        </View>
      </View>;
    });
    return { list };
  }
  getAcceptedList() {
    return <View className="document_card">
        <View className="at-row">
          <View className="at-col at-col-4">B</View>
          <View className="at-col at-col-4">B</View>
        </View>
      </View>;
  }
  render() {
    let tabList = [{ title: '未受理' }, { title: '处理中', text: 1 }, { title: '待确认' }, { title: '已完成' }];
    let com = null;
    if (this.state.tabIndex == 0) {
      com = this.getUnAcceptedList();
    } else if (this.state.tabIndex == 1) {
      com = this.getAcceptedList();
    } else if (this.state.tabIndex == 2) {
      com = this.getUnAcceptedList();
    } else if (this.state.tabIndex == 3) {
      com = this.getUnAcceptedList();
    }
    return <View style="padding:5px;">
        <AtSearchBar value={this.state.searchText} placeholder="发起工单" onChange={this.onSearchTextChange.bind(this)} />
        <AtTabBar tabList={tabList} onClick={this.tabClick.bind(this)} current={this.state.tabIndex} />
        {com}
      </View>;
  }
  config = {
    navigationBarTitleText: '发起工单'
  };
}